<template>
    <div class="com-container">
        <div class="title" :style='comStyle'>
            <span>{{'▎ '+ title}}</span>
            <span class="iconfont icon" @click='isShowTypes=!isShowTypes'>&#xe645;</span>
            <div class="select-con" v-show='isShowTypes' :style='selectConStyle'>
                <div class="select-item" v-for='item in selectTypes' :key='item.key' @click='handleSelect(item.key)'>{{item.text}}</div>
            </div>
        </div>
        <div class="com-chart" ref='trend_ref'></div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {request} from 'network/request'
    import {getThemeValue} from '@/utils/theme_utils'
    export default {
        name: '',
        data () {
            return {
                chartInstance:null,
                data:null,
                isShowTypes:false,
                choiceType:'map',
                titleFontSize:0
            }
        },
        created () {
            // 在组件创建完成后 进行回调函数注册
            this.$socket.registerCallBack('trendData',this.getData)
        },
        mounted () {
            this.initChart()
            // this.getData(),
            // 发送数据给服务器，告诉服务器，我们需要数据
            // 服务器向客户端传递数据的时候就执行了this.data回调函数，并传入了realData数据
            this.$socket.send({
                action:'getData',
                socketType:'trendData',
                chartName:'trend',
                value:''
            })
            window.addEventListener('resize',this.screenAdapter)
            this.screenAdapter()
        },
        destroyed () {
            window.removeEventListener('resize',this.screenAdapter)
            // 组件销毁的时候 进行回调函数的取消
            this.$socket.unRegisterCallBack('trendData')
        },
        computed: {
            selectTypes(){
                if(!this.data){
                    return []
                }else{
                    return this.data.type.filter(item=>item.key!=this.choiceType)
                }
            },
            title(){
                if(!this.data){
                    return ''
                }else{
                    return this.data[this.choiceType].title
                }
            },
            comStyle(){
                return {
                    fontSize:this.titleFontSize+'px',
                    color:getThemeValue(this.theme).titleColor,
                    fontWeight:600
                }
            },
            selectConStyle(){
                return {
                    marginLeft:this.titleFontSize+'px',
                    backgroundColor:getThemeValue(this.theme).selectbgc
                }
            },
            ...mapState(['theme'])
        },
        methods: {
            initChart(){
                this.chartInstance=this.$echarts.init(this.$refs.trend_ref,this.theme)
                const initOption={
                    xAxis:{
                        type:'category',
                        boundaryGap:false//紧挨边缘效果
                    },
                    yAxis:{
                        type:'value'
                    },
                    // 设置坐标轴的大小和位置
                    grid:{
                        left:'3%',
                        right:'4%',
                        top:'35%',
                        bottom:'1%',
                        containLabel:true//距离包含文字
                    },
                    tooltip:{
                        trigger:'axis'
                    },
                    legend:{
                        left:'20%',
                        top:'20%',
                        icon:'circle'//筛选图标为圆型
                    }
                }
                this.chartInstance.setOption(initOption)
            },
            getData(res){
                // 改造后，服务器主动向客户端推送数据
                // const {data:Data}=await request({url:'/trend'})
                // this.data=Data
                this.data=res
                this.updateChart()
            },
            updateChart(){
                // 半透明颜色
                const colorArr1=[
                    'rgba(11,168,44,0.5)',
                    'rgba(44,110,255,0.5)',
                    'rgba(22,242,217,0.5)',
                    'rgba(254,33,30,0.5)',
                    'rgba(250,105,0,0.5)'
                ]
                // 全透明颜色
                const colorArr2=[
                    'rgba(11,168,44,0)',
                    'rgba(44,110,255,0)',
                    'rgba(22,242,217,0)',
                    'rgba(254,33,30,0)',
                    'rgba(250,105,0,0)'
                ]
                // 处理数据
                // 类目轴数据
                const timeArr=this.data.common.month
                // y轴数据
                const valueArr=this.data[this.choiceType].data
                const seriesArr=valueArr.map((item,index)=>{
                    return {
                        name:item.name,
                        type:'line',
                        data:item.data,
                        stack:this.choiceType,
                        areaStyle:{
                            color:new this.$echarts.graphic.LinearGradient(0,0,0,1,[
                                {
                                    offset:0,
                                    color:colorArr1[index]
                                },//0%处颜色
                                {
                                    offset:1,
                                    color:colorArr2[index]
                                }//100%处颜色
                            ])
                        }
                    }
                })
                const dataOption={
                    xAxis:{
                        data:timeArr
                    },
                    // 筛选
                    legend:{
                        data:seriesArr.map(item=>item.name)
                    },
                    series:seriesArr
                }
                this.chartInstance.setOption(dataOption)
            },
            screenAdapter(){
                this.titleFontSize=this.$refs.trend_ref.offsetWidth/100*3.6
                const adapterOption={
                    legend:{
                        itemWidth:this.titleFontSize,
                        itemHeight:this.titleFontSize,
                        itemGap:this.titleFontSize,
                        textStyle:{
                            fontSize:this.titleFontSize/2
                        }
                    }
                }
                this.chartInstance.setOption(adapterOption)
                this.chartInstance.resize()
            },
            handleSelect(currentType){
                this.choiceType=currentType
                this.updateChart()
                this.isShowTypes=false
            }
        },
        watch: {
            theme(){
                this.chartInstance.dispose()
                this.initChart()
                this.screenAdapter()
                this.updateChart()
            }
        }
    }
</script>

<style scoped>
.title{
    position: absolute;
    left: 20px;
    top: 20px;
    color:white;
    z-index:9;
    user-select: none;
}
.title .icon{
    margin-left: 10px;
    cursor: pointer;
}
</style>
